<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseIconBox
      size="md"
      class="bg-primary-100 text-primary-500 dark:border-primary-500 dark:bg-primary-500/20 dark:text-primary-400 dark:border-2"
    >
      <Icon name="ph:nut-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-lime-100 text-lime-500 dark:border-2 dark:border-lime-500 dark:bg-lime-500/20 dark:text-lime-400"
    >
      <Icon name="ph:cookie-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-green-100 text-green-500 dark:border-2 dark:border-green-500 dark:bg-green-500/20 dark:text-green-400"
    >
      <Icon name="ph:armchair-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-emerald-100 text-emerald-500 dark:border-2 dark:border-emerald-500 dark:bg-emerald-500/20 dark:text-emerald-400"
    >
      <Icon name="ph:confetti-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-teal-100 text-teal-500 dark:border-2 dark:border-teal-500 dark:bg-teal-500/20 dark:text-teal-400"
    >
      <Icon name="ph:flask-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-cyan-100 text-cyan-500 dark:border-2 dark:border-cyan-500 dark:bg-cyan-500/20 dark:text-cyan-400"
    >
      <Icon name="ph:lamp-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-sky-100 text-sky-500 dark:border-2 dark:border-sky-500 dark:bg-sky-500/20 dark:text-sky-400"
    >
      <Icon name="ph:pill-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-blue-100 text-blue-500 dark:border-2 dark:border-blue-500 dark:bg-blue-500/20 dark:text-blue-400"
    >
      <Icon name="ph:chat-circle-dots-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-indigo-100 text-indigo-500 dark:border-2 dark:border-indigo-500 dark:bg-indigo-500/20 dark:text-indigo-400"
    >
      <Icon name="ph:popcorn-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-purple-100 text-purple-500 dark:border-2 dark:border-purple-500 dark:bg-purple-500/20 dark:text-purple-400"
    >
      <Icon name="ph:medal-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-fuchsia-100 text-fuchsia-500 dark:border-2 dark:border-fuchsia-500 dark:bg-fuchsia-500/20 dark:text-fuchsia-400"
    >
      <Icon name="ph:rocket-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-pink-100 text-pink-500 dark:border-2 dark:border-pink-500 dark:bg-pink-500/20 dark:text-pink-400"
    >
      <Icon name="ph:kanban-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-rose-100 text-rose-500 dark:border-2 dark:border-rose-500 dark:bg-rose-500/20 dark:text-rose-400"
    >
      <Icon name="ph:telegram-logo-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-red-100 text-red-500 dark:border-2 dark:border-red-500 dark:bg-red-500/20 dark:text-red-400"
    >
      <Icon name="ph:fire-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-orange-100 text-orange-500 dark:border-2 dark:border-orange-500 dark:bg-orange-500/20 dark:text-orange-400"
    >
      <Icon name="ph:sword-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-amber-100 text-amber-500 dark:border-2 dark:border-amber-500 dark:bg-amber-500/20 dark:text-amber-400"
    >
      <Icon name="ph:timer-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox
      size="md"
      class="bg-yellow-100 text-yellow-500 dark:border-2 dark:border-yellow-500 dark:bg-yellow-500/20 dark:text-yellow-400"
    >
      <Icon name="ph:toggle-start-duotone" class="h-5 w-5" />
    </BaseIconBox>
  </div>
</template>
`
